<template>
<ul :id="id" class="dropdown menu dropdown-btn-grp">
  <li v-for="(item, idx) in items" :key="idx">
    <a :class="item.classes ? defaultBtnClasses.concat(item.classes) : defaultBtnClasses"
       @click="triggerHandler(item.handler, item.disabled)"
       :disabled="item.disabled">
      <et-icon :name="item.icon" />
      <span>{{ $t(item.txt) }} {{ item.handler && !item.disabled }}</span>
    </a>
    <ul v-if="item.children" class="menu et-dropdown">
      <li v-for="(subitem, index) in item.children" :key="index">
        <a @click="subitem.handler && !subitem.disabled ? subitem.handler : () => {}" :disabled="subitem.disabled">
          <et-icon :name="subitem.icon" />
          <span>{{ $t(subitem.txt) }}</span>
        </a>
      </li>
    </ul>
  </li>
</ul>
</template>

<script>
import { EtIcon } from '../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    id: {
      type: String,
      required: true
    },
    items: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      defaultBtnClasses: ['button', 'et-icon-btn']
    };
  },

  methods: {
    triggerHandler(handler, disabled) {
      if (handler && !disabled) {
        handler();
      }
    }
  },

  mounted() {
    new Foundation.DropdownMenu($(`#${this.id}`), {});
  }

};
</script>
